<template>
  <el-card
    class="box-card"
    v-for="(item, index) in useStore.article"
    :key="index"
    @click="handlePath(info.path, item._id)"
  >
    <h4>{{ item.title }}</h4>
    <div class="userinfo">
      <img src="@/assets/toux.jpg" alt="" />
      <span>作者：阿伟</span>
      <span>发布时间：{{ item.createdAt.split(" ")[0] }}</span>
      <span>类型：{{ item.classify }}</span>
    </div>
    <div class="font ck-content" v-html="item.content"></div>
    <div class="footeRecord" v-if="info.show">
      <el-button type="primary" :icon="Edit" circle @click="handleEdit(item)" />
      <el-button
        type="danger"
        :icon="Delete"
        circle
        @click="handleDelete(item)"
      />
    </div>
  </el-card>
</template>

<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import axios from "axios";
import { useHomeStore } from "@/stores/home";
import {
  toRefs,
  defineProps,
  onMounted,
  reactive,
  onUpdated,
  computed,
} from "vue";
import { useRouter } from "vue-router";
import URL from "@/api/url";
import fn from "@/tools/timer.js";
const router = useRouter();
const useStore = useHomeStore();
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Object,
});
//使用父组件传递过来的值
const { info } = toRefs(props);
const data = reactive({
  // articleInfo:useStore.Info
});
const handleEdit = (item) => {
  useStore.Info = item;
  router.push({
    path: "/recompose",
  });
};
const handleDelete = (item) => {
  // console.log(item._id);
  axios.delete(URL() + `/article/delArticle/${item._id}`).then((item) => {
    // console.log(item);
    if (item.data.code === 20000) {
      ElMessage({
        message: item.data.message,
        type: "success",
      });
      check();
    }
    // data.articleInfo = item.data.data
    // console.log(data.articleInfo);
  });
};
function check() {
  axios.get(URL() + "/article/checkArticle").then((item) => {
    if (item.data.code === 20000) {
      // console.log(item);
      item.data.data.forEach((element) => {
        element.createdAt = fn(element.createdAt);
      });
      data.articleInfo = item.data.data.sort((a, b) => {
        return new Date(b.createdAt) - new Date(a.createdAt);
      });
      useStore.article = data.articleInfo;
      // console.log(useStore.article);
    }
  });
}
const handlePath = (path, id) => {
  if (path === "artDetail") {
    router.push({
      name: path,
      query: {
        id: id,
      },
    });
  }
};
onMounted(() => {
  // check()
});
</script>

<style lang="scss" scoped>
.el-card {
  cursor: pointer;
  background-color: #ffffff62;
  .footeRecord {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.box-card {
  margin-bottom: 10px;
  --el-card-padding: 10px;
  .font {
    height: 76px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 行数 */
    -webkit-box-orient: vertical;
  }
  h4 {
    padding-left: 10px;
  }
  .userinfo {
    display: flex;
    align-items: center;
    margin: 10px;
    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
    span {
      margin: 0 5px;
      font-size: 12px;
    }
  }
}
</style>